<template>
	<view>
	<view v-if="need_login_show">
		<m-login></m-login>
	</view>
	<view v-else class="business">
		<van-tabs :active="active"  @change="onChange" sticky>
			<van-tab class="buyOrChange" title="购买/转让">
				<view class="b-select">
					<view class="s-header" @tap="handleSelectShop()">
						<view>
							<text class="h-title">{{selectShop.text}}</text>
							<image :src="img_url+'static/img/pullbottom.png'"></image>
						</view>
						<view class="h-money">￥{{selectShop.price}}</view>
					</view>
				</view>
				<view class="b-buy">
					<view class="b-title">求购</view>
					<view class="b-box">
						<view class="b-header pub">
							 <view class="h-time pub-time">时间</view>
							 <view class="h-prcie pub-price">价格(￥)</view>
							 <view class="h-num pub-num">数量(套)</view>
						</view>
						<view class="b-con pub" v-for="(item,index) in buyList" :key="index">
							<view  class="c-time pub-time">{{item.transaction_at}}</view>
							<view  class="c-prcie pub-price">{{item.price}}</view>
							<view class="c-num pub-num">{{item.number}}</view>
						</view>
					</view>
				</view>
				<view class="b-change">
					<view class="b-title">转让</view>
					<view class="b-box">
						<view class="b-header pub">
							 <view class="h-time pub-time">时间</view>
							 <view class="h-prcie pub-price">价格(￥)</view>
							 <view class="h-num pub-num">数量(套)</view>
						</view>
						<view class="b-con pub" v-for="(item,index) in zhuanList" :key="index">
							<view  class="c-time pub-time">{{item.transaction_at}}</view>
							<view  class="c-prcie pub-price">{{item.price}}</view>
							<view class="c-num pub-num">{{item.number}}</view>
						</view>
					</view>
				</view>
				<view class="buy-btn" @tap="buyNow">
					立即购买
				</view>
			</van-tab>
			<van-tab  title="订单">
				<view class="order">
					<view v-if="orderList.length!==0">
						<view class="order-box"  v-for="(item,index) in orderList" :key="index">
							<view class="ob-name pub">
								<view class="name">名称</view>
								<view class="con">{{item.product_name}}</view>
							</view>
							<view class="ob-price pub">
								<view class="name">买入价格</view>
								<view class="con">{{item.buy_total_price}}</view>
							</view>
							<view class="ob-total pub">
								<view class="name">可卖/总数</view>
								<view class="con">{{item.can_sale}}/{{item.total_number}}</view>
							</view>
							<view class="ob-market pub">
								<view class="name">市值</view>
								<view class="con">{{item.market_value}}</view>
							</view>
							<view class="ob-time pub">
								<view class="name">买入时间</view>
								<view class="con">{{item.buy_at}}</view>
							</view>
							<button class="pick-btn" @tap="handleTiHuo(item)">提货</button>
						</view>
					</view>
					<view  v-else>
					<MnoData></MnoData>
					</view>

				</view>
				<view class="pick-value">提货值:{{now_basic_income}}</view>
			</van-tab>
			<van-tab  title="交易记录">
				<view class="business-record">
					<view class="r-data">
							<view  @tap="hanldeShowData()"><image class="date_image" :src="img_url+'static/img/date_choose.png'"></image></view>
							<view class="d-time" @tap="hanldeShowData()">日期选择</view>
							<image class="date_arrow_image"  @tap="hanldeShowData()" src="../../static/img/down_arrow.png"></image>
						<view class="business_number">
							<view><image class="search_image" src="../../static/img/search.png"></image></view>
							<view><input type="text" @confirm='inputConfirm' v-model="word" placeholder="请输入交易编号"/></view>
						</view>
					</view>
					<view class="r-list"  v-if="businessList.length!==0">
						<view class="l-box" v-for="(item,index) in businessList" :key="index">
							<view class="b-num">
								<view class="n-title">交易编号：{{item.no_number}}</view>
								<view class="n-money">{{item.show_number}}</view>
							</view>
							<view class="b-time">
								<view class="t-title">{{item.created_at}}</view>
								<view class="t-status">{{item.status_name}}</view>
							</view>
						</view>
					</view>
					<view  v-else>
						<MnoData></MnoData>
					</view>
				</view>

			</van-tab>
		</van-tabs>
		<view class="s-content" :style="{top: showSelect ? 173+'rpx' : -1000+'rpx'}" v-if="selectTap===0">
			<view class="c-header">
				<view class="h-title">品类</view>
				<view class="h-hao">品名/编号</view>
				<view class="h-price">价格/单</view>
			</view>
			<view class="c-con">
				<van-tree-select
				  :items="leftList"
				  :main-active-index="mainActiveIndex"
				  :active-id="activeId"
				  @click-nav="onClickNav"
				>
				  <template slot="content">
					<view class="c-right">
						 <view class="r-item" v-for="(item,dex) in rightList" :key="dex" @tap="onClickItem(item)">
							 <view class="i-name">{{item.text}}</view>
							 <view class="i-price">￥{{item.price}}</view>
						 </view>
					</view>
				  </template>

				</van-tree-select>
			</view>

		</view>
	    <van-calendar
		   type="single"
		  :min-date="minDate"
		  :max-date="maxDate"
	      :show="showData"
		  :title="'选择筛选日期'"
		  :close-on-click-overlay="true"
		  @close="handleCloseData"
		  @confirm="handleSubmitData"
	    />
	</view>
	</view>
</template>

<script>
	import MnoData from '@/components/m-noData.vue'
	import MLogin from '@/components/m-login.vue'
	export default {
		name: 'business',
		data() {
			return {
				need_login_show:false,
				value2222:"",
				checked:true,
				selectTap:0,
				active:0,
				activeId:"",
				mainActiveIndex:0,
				showSelect:false,
				leftList:[],
				rightList:[],
			    leibieList:[],
				buyList:[],
				zhuanList:[],
				orderList:[],
				itemTitle: "茅台酒",
				selectShop:{}, //选中的类型商品
				businessList:[],
				showData:false,
				minDate: new Date(2020, 0, 1).getTime(),
				maxDate: new Date().getTime(),
				page:1,
				is_load:0,
				now_basic_income:'',
				day:'',
				word:'',
				img_url:this.$mConfig.assetsPath
			}
		},
		onShow(){
			// console.log(new Date())

		},
		async mounted(){
			if(this.$store.state.token!==''){ // 处理是否需要登录显示
				this.need_login_show=false
			}else{
				this.need_login_show=true
				return
			}
			let product_type_res= await this.$apis.getProductTypeList()
			if(product_type_res.code===0){
				let product_type_list = product_type_res.data.lists
				product_type_list.forEach((item)=>{
					let newObj={}
					newObj.text=item.name
					newObj.activeId=item.id
					this.leftList.push(newObj)
					this.getTypeArrayList(item)
				})
			}
			setTimeout(()=>{
				this.productTransactionDetail()
			},500)

		},
		//页面触底钩子
		onReachBottom() {
			if(this.selectTap===1){
				this.getMyPosition()
			}
			if(this.selectTap===2){
				this.productSaleRecord()
			}
		},
		methods: {
			async getTypeArrayList(item){ // 处理类型数据
				let data={text:'',activeId:'',children:[]}
				let res = await this.$apis.getTypeProductList({product_type_id:item.id})
				if(res.code===0){
					data.text=item.name
					data.activeId=item.id
					res.data.lists.forEach((item1)=>{
						let a ={text:'',activeId:'',price:''}
						a.text=item1.name
						a.activeId=item1.id
						a.price=item1.price
						data.children.push(a)
					})
					this.leibieList.push(data)
				}
				this.rightList=this.leibieList[this.mainActiveIndex].children
				this.selectShop=this.rightList[0]
			},

			//获取下方显示数据
			async productTransactionDetail(){
				uni.showLoading({});
				let res=await this.$apis.productTransactionDetail({position_id:this.selectShop.activeId})
				if(res.code===0){
					this.buyList=res.data.lists
				}
				uni.hideLoading();
			},
			//切换顶部标签时触发
			onChange(e) {
				if(this.selectShop===e.detail.name){
					return
				}else{
					this.selectTap=e.detail.name
					if(this.selectTap===0){ // 购买转让
						this.buyList=[]
						this.zhuanList=[]
						this.productTransactionDetail()
					}else if(this.selectTap===1){ //订单
						this.page=1
						this.is_load=0
						this.orderList=[]
						this.getMyPosition()
					}else if(this.selectTap===2){ //交易记录
						this.page=1
						this.is_load=0
						this.businessList=[]
						this.productSaleRecord()
					}
				}

			},
			//跳转提货页面
			handleTiHuo(item){
				this.$router.push({
					route:this.$routesConfig.profitPositionPickUp,
					query:{market_value:item.total_number,profit_position_id:item.id,is_business:1}
				})
			},
			//是否展示所有的商品的分类
			handleSelectShop(){
				this.showSelect=!this.showSelect
			},
			//点击左边分类时触发
			onClickNav(nav){
				this.mainActiveIndex=nav.detail.index
				this.$nextTick(function(){
					this.leibieList.forEach((item,index)=>{
						if(item.activeId===this.leibieList[this.mainActiveIndex].activeId){
							this.rightList=item.children
						}
					})

				})
			},
			//点击子分类下的某个商品触发
			onClickItem(item){
				this.showSelect=!this.showSelect
				this.selectShop=item
				this.buyList=[]
				this.zhuanList=[]
				this.productTransactionDetail()
			},
			//展示日期
			hanldeShowData(){
			   this.showData=true
			},
			//关闭日期弹窗
			handleCloseData(){
				this.showData=false
			},
			//选择日期完成后
			handleSubmitData(res){
				let year=res.detail.getFullYear()
				let month=res.detail.getMonth()+1
				let day=res.detail.getDate()
				this.day=year+'-'+month+'-'+day
				this.showData=false
				this.page=1
				this.is_load=0
				this.businessList=[]
				this.productSaleRecord()
			},
			//完成输入过后
			inputConfirm(){
				this.page=1
				this.is_load=0
				this.businessList=[]
				this.productSaleRecord()
			},
			//立即购买
			async buyNow(){
				if(this.selectShop.activeId>0){
					uni.showLoading({});
					let res= await this.$apis.checkContract({access_token:''})
					if(res.code===0){
						let res1 = await this.$apis.buyPosition({id:this.selectShop.id})
						if(res1.code===0){
							uni.showToast({
								title:"购买成功",
								icon:"success",
							})
						}
					}
					uni.hideLoading();
				}else{
					uni.showToast({
						title:"操作失败",
						icon:"none",
					})
				}
			},
			async getMyPosition(){  // 获取我的持仓订单
				uni.showLoading({});
				let res= await this.$apis.myPosition({page:this.page,type:2})
				if(res.code===0){
					this.orderList.push(...res.data.lists)
					this.is_load=res.data.is_load
					this.now_basic_income=res.data.now_basic_income
				}
				uni.hideLoading();
			},
			async productSaleRecord(){  // 获取交易记录
				uni.showLoading({});
				let res= await this.$apis.productSaleRecord({page:this.page,day:this.day,word:this.word,id:this.selectShop.activeId})
				if(res.code===0){
					this.businessList.push(...res.data.lists)
					this.is_load=res.data.is_load
				}
				uni.hideLoading();
			}
		},
		components:{
			MnoData,
			MLogin
		}

	}
</script>

<style lang="less" scoped>
	.business {
		box-sizing: border-box;
		position: relative;
		.buyOrChange {
			box-sizing: border-box;
			// padding: 30rpx 20rpx 20rpx 20rpx;
			.b-select {
				position: relative;
				background-color: #ffffff;
				z-index: 100;
				.s-header{
					padding: 0rpx 40rpx 0 40rpx;
					box-sizing: border-box;
					display: flex;
					box-sizing: border-box;
					height: 90rpx;
					font-size: 30rpx;
					align-items: center;
					justify-content: space-between;
					border-bottom: solid 1px #EDEDED;
					.h-title {
						padding-right: 20rpx;
					}
					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		    .b-buy{
				display: flex;
				box-sizing: border-box;
				padding: 30rpx 20rpx 0rpx 20rpx;
				.b-title{
					width: 160rpx;
					text-align: center;
					flex-shrink: 0;
					align-self: center;
					color: orange;
				}
				.b-box{
					flex-grow: 1;
					box-sizing: border-box;
					padding: 0 30rpx 40rpx 30rpx;
					max-height: 350rpx;
					overflow: auto;
					border-bottom: solid 1px #EDEDED;
					.pub{
						display: flex;
						font-size: 26rpx;
						color: gray;
						.pub-time{
							flex-grow: 1;
						    line-height: 60rpx;
						}
						.pub-price{
							width: 160rpx;
							flex-shrink: 0;
							line-height: 60rpx;
						}
						.pub-num{
							width: 120rpx;
							flex-shrink: 0;
							line-height: 60rpx;
						}
						.c-prcie{
							color: orange;
						}
						.c-num{
							color: #333333;
						}
					}
				}
			}
			.b-change{
				display: flex;
				box-sizing: border-box;
				padding: 30rpx 20rpx 0rpx 20rpx;
				.b-title{
					width: 160rpx;
					text-align: center;
					flex-shrink: 0;
					align-self: center;
					color: #5BAA59;
				}
				.b-box{
					flex-grow: 1;
					box-sizing: border-box;
					padding: 0 30rpx 40rpx 30rpx;
					max-height: 350rpx;
					overflow: auto;
					border-bottom: solid 1px #EDEDED;
					.pub{
						display: flex;
						font-size: 26rpx;
						color: gray;
						.pub-time{
							flex-grow: 1;
						    line-height: 60rpx;
						}
						.pub-price{
							width: 160rpx;
							flex-shrink: 0;
							line-height: 60rpx;
						}
						.pub-num{
							width: 120rpx;
							flex-shrink: 0;
							line-height: 60rpx;
						}
						.c-prcie{
							color: orange;
						}
						.c-num{
							color: #333333;
						}
					}
				}
			}
		    .buy-btn{
				width: 385rpx;
				height: 80rpx;
				background-color: #FF9502;
				color: #ffffff;
				font-size: 36rpx;
				line-height: 80rpx;
				text-align: center;
				margin: 30rpx auto;
				border-radius: 40rpx;
			}
		}
		.order{
			margin-bottom: 80rpx;
			.order-box{
				box-sizing: border-box;
				padding: 20rpx 20rpx;
				border-bottom: solid 1px #EDEDED;
				.pub{
					display: flex;
					.name{
						width: 250rpx;
						line-height: 60rpx;
						font-size: 26rpx;
						color: gray;
						flex-shrink: 0;
						text-align: center;
					}
					.con{
						flex-grow: 1;
						line-height: 60rpx;
						color: #333333;
						font-size: 30rpx;
						text-align: left;
					}
				}
				.pick-btn{
					margin-top: 30rpx;
					width: 150rpx;
					height: 50rpx;
					background-color: #FF9502;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 50rpx;
					border-radius: 25rpx;
				}
			}
		}
		.business-record{
			position: relative;
			width: 100%;
			.r-data{
				position: fixed;
				background-color: #ffffff;
				width: 100%;
				height: 80rpx;
				display: flex;
				box-sizing: border-box;
				padding: 0 30rpx;
				justify-content: space-between;
				align-items: center;
				border-bottom: solid 1px #EDEDED;
				.d-time{
					font-size: 28rpx;
					color: #333333;
					width: 70rpx;
					margin-left: -120rpx;

				}
				.date_arrow_image{
					position: relative;
					width: 40rpx;
					height: 40rpx;
					margin-left: -120rpx;
				}
			}
		    .r-list{
				width: 100%;
				box-sizing: border-box;
				padding: 80rpx 20rpx 0 20rpx;
				.l-box{
					box-sizing: border-box;
					border-bottom: solid 1px #EDEDED;
					padding: 40rpx 0;
					.b-num{
						display: flex;
						justify-content: space-between;
						// line-height: 80rpx;
						.n-title{
							font-size: 26rpx;
							color: #333333;

						}
						.n-money{
							font-size: 26rpx;
							color: #333333;

						}
					}
					.b-time{
						padding-top: 20rpx;
						display: flex;
						justify-content: space-between;
						// line-height: 80rpx;
						.t-title{
							font-size: 24rpx;
							color: gray;
						}
						.t-status{
							font-size: 24rpx;
							color:gray;
						}
					}
				}
			}
		}
		.pick-value{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 80rpx;
			line-height: 80rpx;
			color: #FF9502;
			font-size: 28rpx;
			text-align: center;
			background-color: #ffffff;
			border-top: solid 0.5px #EDEDED;

		}

		.s-content{
			position: absolute;
			top: -1000rpx;
			transition: all 0.5s;
			// top: -200rpx;
			left: 0;
			right: 0;
			background-color: #ffffff;
			.c-header{
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
			    font-size: 24rpx;
				color: gray;
				height: 90rpx;
				align-items: center;
				.h-title{
					width: 160rpx;
					flex-shrink: 0;
					text-align: center;
				}
				.h-hao{
					flex-grow: 1;
					text-align: center;
				}
				.h-price{
					width: 200rpx;
					flex-shrink: 0;
					text-align: center;
				}
			}
		    .c-con{
				box-sizing: border-box;
				.c-right{
					width: 100%;
					.r-item{
						display: flex;
						box-sizing: border-box;
						height: 80rpx;
						align-items: center;
						.i-name{
							flex-grow: 1;
							text-align: center;
							font-size: 28rpx;
						}
						.i-price{
							width: 200rpx;
							flex-shrink: 0;
							text-align: center;
							font-size: 28rpx;
							color: orange;
						}
					}
				}
			}
		}
	}

	.business /deep/ .van-tabs__line {
		background-color: orange;
	}

	.business /deep/ .van-tree-select__nav {
		width: 160rpx;
		flex-shrink: 0;
		flex: none;
	}
	.business /deep/ .van-sidebar-item{
		height: 80rpx;
		line-height: 80rpx;
		padding: 0;
		font-size: 28rpx;
		text-align: center;
	}
	  .business /deep/ .van-tabs--line .van-tabs__wrap {
	    height: 80rpx;
	  }
      .business /deep/ .van-tab{
		  height: 80rpx;
		  line-height: 80rpx;
	  }
	.business_number{
		display: flex;
		flex-direction: row;
		width: 360rpx;
		border: solid 0.5px #999999;
		border-radius: 10px;
		font-size: 25rpx;
	}
	.search_image{
		margin-top: 7rpx;
		height: 35rpx;
		width: 35rpx;
	}
	.date_image{
		margin-left: 12rpx;
		height: 50rpx;
		width: 50rpx;
	}
	.empty_img{
		margin-top: 200rpx;
		width: 520rpx;
		height: 360rpx;
	}
	.empty_text{
		color: #333333;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
	.empty_box{
		text-align: center;
	}
</style>
